<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    按钮-->
        <el-col :span="24" class="btn-page-wrapper">
          <el-button type="success" @click="apply()">申请</el-button>
          <el-button @click="cancel()" :disabled="cancelDisabled">取消</el-button>
          <el-button type="info" @click="blacklist">黑名单</el-button>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table v-loading="loading"
                    :data="data"
                    stripe
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
            <el-table-column prop="id" label="直播间ID" align="center">
              <template slot-scope="scope">{{scope.row.id}}</template>
            </el-table-column>
            <el-table-column prop="title" label="直播间标题" align="center"></el-table-column>
            <el-table-column prop="cover" label="封面" align="center">
              <template slot-scope="scope">
                <img :src="`https://tencentyun-ms-1312352800.cos.ap-guangzhou.myqcloud.com/${scope.row.cover}`" style="width:50px;height:50px;"/>
              </template>
            </el-table-column>
            <el-table-column prop="openTime" label="开播时间" align="center"></el-table-column>
            <el-table-column prop="viewQuantity" label="当前人数" align="center"></el-table-column>
            <el-table-column prop="giveALike" label="当前点赞数" align="center"></el-table-column>
            <el-table-column prop="location" label="直播定位地址" align="center"></el-table-column>
            <el-table-column prop="statusValue" label="状态" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center" width="180">
              <template slot-scope="scope">
                <!--待审核-->
                <div v-if="scope.row.statusValue == '待审核'">
                  <el-button @click.stop="apply(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="cancel(scope.row.id)" type="text" style="color:red;">取消</el-button>
                </div>
                <!--待开始-->
                <div v-else-if="scope.row.statusValue == '待开始'">
                  <el-button @click.stop="apply(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="share(scope.row.id)" type="text">分享</el-button>
                  <el-button @click.stop="toConsole(scope.row.id)" type="text">控制台</el-button>
                  <el-button @click.stop="cancel(scope.row.id)" type="text" style="color:red;">取消</el-button>
                </div>
                <!--直播中-->
                <div v-else-if="scope.row.statusValue == '直播中'">
                  <el-button @click.stop="share(scope.row.id)" type="text">分享</el-button>
                  <el-button @click.stop="toConsole(scope.row.id)" type="text">控statusValue制台</el-button>
                  <el-button @click.stop="cancel(scope.row.id)" type="text" style="color:red;">取消</el-button>
                </div>
                <!--已结束-->
                <div v-else-if="scope.row.statusValue == '已结束'">
                  <el-button @click.stop="share(scope.row.id)" type="text">分享</el-button>
                  <el-button @click.stop="toConsole(scope.row.id)" type="text">控制台</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red;">删除</el-button>
                </div>
                <!--已拒绝-->
                <div v-else-if="scope.row.statusValue == '已拒绝'">
                  <el-button @click.stop="apply(scope.row.id)" type="text">编辑</el-button>
                  <el-button @click.stop="viewReason(scope.row.id)" type="text" style="color:red;">查看原因</el-button>
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red;">删除</el-button>
                </div>
                <!--已禁用-->
                <div v-else-if="scope.row.statusValue == '已禁用'">
                  <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red;">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--  编辑对话框  -->
    <editor  @close="closeEditor" :id-list="idList" :is-editor="isEditor"></editor>
    <!-- 查看原因对话框 -->
    <reason  @close="closeReason" :id-list="idList" :is-reason="isReason"></reason>
    <!-- 黑名单对话框 -->
    <blacklist @close="closeBlacklist" :id-list="idList" :is-blacklist="isBlacklist"></blacklist>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import Editor from '@/framework/components/dialog/live/list/editor'
import Blacklist from '@/framework/components/dialog/live/list/blacklist'
import Reason from '@/framework/components/dialog/live/list/Reason'
import PageMixin from '@/framework/mixins/pageMixin'
import {findWithMe,countWithMe,batchCancel,deleteLive} from '@/project/service/live'
import {throttle} from "@/framework/utils/throttle";


export default {
  name: "list",
  mixins: [
    PageMixin,
  ],
  data(){
    return{
      searchItems: [
        {name: '直播间标题', key: 'title', type: 'string'},
        {
          name: '状态', key: 'status', type: 'select',
          displayValue: ['待审核', '待开始', '直播中', '已结束', '已拒绝', '已禁用'],
          value:{
           0:'pending', 1:'preparing' , 2:'broadcasting',
           3:'finished' , 4:'rejected' , 5:'disabled'
          }
        }
      ],
      data:[],//直播间列表
      formLabelWidth: '120px',
      isEditor:false,//是否打开编辑弹框
      path: "https://www.baidu.com", //直播间地址
      isReason:false, //是否查看原因
      isBlacklist:false,//是否为黑名单
      idList:[],//存放id的数组
      cancelDisabled:true,//取消按钮是否禁用
      loading: true,
    }
  },
  components: { Search, Editor, Blacklist, Reason },
  created(){
    this.listUpdate()
  },
  methods:{
    //获取直播间列表
    search(obj,type){
      findWithMe(obj,data => {
        data.forEach(item => {
          item.id = item.id.toString()
          if (item.status == 'pending') {
            item.statusValue = '待审核'
          } else if (item.status == 'rejected') {
            item.statusValue = '已拒绝'
          } else if (item.status == 'preparing') {
            item.statusValue = '待开始'
          } else if(item.status == 'broadcasting') {
            item.statusValue = '直播中'
          }else if(item.status == 'finished'){
            item.statusValue = '已结束'
          }else if(item.status == 'disabled'){
            item.statusValue = '已禁用'
          }
        })
        console.log(data)
        this.data = data
        this.loading = false
        if(type=='search'){
          this.$message.success('查询成功')
        }
      })
    },
    // 统计直播间列表
    getCount(title,status){
      // console.log(title,status)
      //条件搜索
      if(title || status){
        countWithMe({live:{title,status}},data => {
          console.log('统计：'+ data)
          this.total = data
        })
      }else{
        countWithMe({},data => {
          this.total = data
        })
      }
    },
    //直播间列表更新
    listUpdate(){
      let listParam = {
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount()
    },
    //条件搜索
    searchBySearchItem: throttle(
      function(res){
        this.loading = true
        // console.log(res)
        let param = {
          live:{title:res.title,status:res.status},
          pageable:{page:1, size:this.pageSize, sort:"id", desc:true},
        }
        // console.log(param)
        this.search(param,'search')
        this.getCount(res.title,res.status)
      }
      ,1000),
    //表格项选择触发事件
    handleSelectionChange(row){
      let list = []
      if(row.length == 0){
        this.cancelDisabled = true
      }else{
        this.cancelDisabled = false
        row.forEach(item=> {
          list.push(item.id)
        })
      }
      this.idList = list
    },
    //判断改行是否可选（是否为取消）
    checkSelectable(row, index) {
      return row.statusValue ==  '直播中' || row.statusValue ==  '待开始' || row.statusValue ==  '待审核'
    },
    //分享直播地址
    share(id) {
      let text = '复制地址:'+`${this.path}`
      this.$confirm(text, '提示', {
        confirmButtonText: '复制地址',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '复制地址成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //取消直播
    cancel(id) {
      this.$confirm('是否确认取消直播？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        //判断是单行取消还是多行取消
        this.idList = id ? [id] : this.idList
        console.log({idList: this.idList})
        batchCancel({idList: this.idList},data => {
          console.log(data)
          this.$message({
            type: 'success',
            message: '直播已取消'
          });
          this.listUpdate()
        })
      }).catch(() => {});
    },
    //删除
    remove(id) {
      this.$confirm('是否确认删除直播？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        deleteLive({id},data => {
          if(data == '204'){
            this.$message({
              type: 'success',
              message: '直播已删除'
            });
            this.listUpdate()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //打开申请&编辑对话框
    apply(id){
      this.idList = id ? [id] : []
      this.isEditor = true
    },
    //关闭申请&编辑对话框
    closeEditor(isUpdate){
      this.isEditor = false
      if(isUpdate){
        this.listUpdate()
      }
    },
    //黑名单按钮
    blacklist(id){
      this.idList = [id]
      this.isBlacklist = true
    },
    //关闭黑名单
    closeBlacklist(){
      this.isBlacklist = false
    },
    //查看原因按钮
    viewReason(id){
      this.idList = [id]
      this.isReason = true
    },
    //关闭查看原因对话框
    closeReason(){
      this.isReason = false
    },
    //控制台
    toConsole(id){
      this.$router.push({path:'/live/list/console/'+ id})
    }

  },
}
</script>

<style lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
